<template>
  <div class="search">
    <div class="title">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>搜索结果</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="search-content" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
      <div class="search-else" v-if="noData || loadingFailed">
          <template v-if="noData">
              <NoData>
                  暂无数据&nbsp;请重新搜索
              </NoData>
          </template>
          <template v-if="loadingFailed">
              <NoData>
                  加载失败&nbsp;请稍后重试
              </NoData>
          </template>
      </div>
      <UserRace class="content" v-for="item in searchValue.value" :imgUrl="item.contestProfileSmallPath"
        :key="item.contestId" :name="item.name" :publisher="item.nickName" :start_time="item.startTime"
        :raceId="item.contestId">
      </UserRace>
    </div>
  </div>
  <div class="pag">
    <el-pagination :current-page="currentPage" :page-size="12" :total="total"
      @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script setup>
import NoData from '@/components/NoData.vue';
import UserRace from "../components/UserRace.vue";
// import NavigationBar from "../components/NavigationBar.vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, onMounted, reactive } from "vue";
import { GetContest } from '@/api/front/contest';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
// 判断NoData是否显示
const loadingFailed = ref(false);
const noData = ref(false);

const loading = ref(true)
const currentPage = ref(1);
let total = ref(0)
// const data = ref([]);
const searchValue = reactive([]);

var data = {
  //GetContest接口获取赛事数据的参数初始化
  name: '',
  page_num: 1,
  page_size: 12,
}

// 获取赛事数据
const getcontest = async () => {
  loading.value = true
  await GetContest(data).then(async res => {
    console.log('res1', res);
    searchValue.value = res.data.pageList//拿到赛事数据
    total.value = res.data.total
    console.log('res2', data, searchValue.value)
    if (res.data.total == 0) {
      noData.value = true
    } else {
      noData.value = false
    }
    loading.value = false
  }).catch((err) => {
    console.log('err', err);
    loadingFailed.value = true;
  }) //请失败后的处理结果

}

// 当当前页改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val;
  data.page_num = val
  getcontest()
};
//接收搜索值
var searchName = useRoute().query.searchValue;
console.log('接收搜索值', searchName);

const getkeyword = () => {
  data.name = searchName
  data.page_num = 1
  getcontest()//重新获取赛事数据
  currentPage.value = 1//分页器组件的当前页为1
}

onBeforeRouteUpdate((to, from, next) => {
  console.log('to', to.query.searchValue);
  searchName = to.query.searchValue
  getkeyword()
  next()
})

// 计算显示的数据
// const displayedData = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   return searchValue.value.slice(start, end);
// });

// 模拟数据请求，实际应替换为您的API请求
onMounted(() => {
  window.scrollTo(0, 0)
  getkeyword()
});
</script>

<style scoped lang="scss">
.search {
  margin-top: 60px;
  margin-left: 150px;
  $width: 1180px;

  .title {
    font-size: 12px;
  }

  .search-content {
    width: $width;
    display: flex;
    // align-items: start;
    flex-flow: wrap;
    margin: 30px 0 40px 50px;
    min-height: 480px;
    .search-else {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      width: 250px;
      border-radius: 10px;
      margin-bottom: 15px;
      // width: 250px;
      margin-right: 30px;
    }
  }
}

.pag {
  width: 1280px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 3%;
}
</style>